import React, { useState, useEffect } from 'react';
import {
    Button,
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    TreeSelect,
} from 'antd';

type SizeType = Parameters<typeof Form>[0]['size'];

const Myform: React.FC = (props) => {
    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');

    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };

    const [form] = Form.useForm();
    useEffect(() => {
        form.setFieldsValue(props.itemobj)
    })

    const onFinish = (values: any) => {
        let tags = []
        if (values.tags == 1) {
            tags = ['前端工程师', 'Developer']
        } else if (values.tags == 2) {
            tags = ['后端工程师', 'V6.Dooring', 'Dooring']
        }

        let role = []
        if (values.role == 1) {
            role = ['超级管理员']
        } else if (values.role == 2) {
            role = ['开发者']
        }

        if (props.title === '添加') {
            let obj = {
                key: new Date().getTime(),
                ...values,
                tags,
                role
            }
            props.data.push(obj)
        } else {
            let obj = {
                ...props.itemobj,
                ...values
            }
            let index = props.data.findIndex(item => item.key === props.itemobj.key)
            props.data.splice(index, 1, obj)
        }
        props.onOk()
    }

    return (
        <Form
            form={form}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 14 }}
            layout="horizontal"
            initialValues={{ size: componentSize }}
            onValuesChange={onFormLayoutChange}
            size={componentSize as SizeType}
            style={{ maxWidth: 600 }}
            onFinish={onFinish}
        >

            <Form.Item label="用户名" name='name'>
                <Input />
            </Form.Item>
            <Form.Item label="角色" name='role'>
                <Select
                    defaultValue="角色"
                    options={[
                        { value: '1', label: '超级管理员' },
                        { value: '2', label: '开发者' },
                    ]}
                />
            </Form.Item>
            <Form.Item label="简介" name='desc'>
                <Input />
            </Form.Item>
            <Form.Item label="标签" name='tags'>
                <Select
                    defaultValue="标签"
                    options={[
                        { value: '1', label: '前端工程师' },
                        { value: '2', label: '全栈工程师' },
                    ]}
                />
            </Form.Item>
            <Form.Item >
                <Button type="primary" htmlType="submit">确定</Button>
            </Form.Item>
        </Form>
    );
};

export default Myform;